<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>分析</title>
    <style>
     table { font-size: 10px; width: 100%;}
     div { font-size: 12px; }
     p { font-size: 14px; }
     a:link {color: #000000} /* 未访问的链接 */
     a:visited {color: #888888} /* 已访问的链接 */
     a:hover {color: #883333} /* 鼠标移动到链接上 */
     a:active {color: #000000} /* 选定的链接 */
    </style>
</head>
<body>
<table>
    <tr>
        <td>
            <div id="timeline" style="width: 100%; height: 300px;"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div id="count" style="width: 100%; height: 550px;"></div>
        </td>
    </tr>
    <tr>
        <td>
          <div id="week_hour" style="width: 100%; height: 450px;"></div>
        </td>
    </tr>
</table>
</body>
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
<script>
  var timeline = echarts.init(document.getElementById('timeline'));
  var timeline_option = {
    tooltip : {
      trigger: 'axis'
    },
    legend: {
      data:['触发金额','触发次数']
    },
    xAxis : [
      {
        type : 'category',
        data : <?=json(array_keys($time_line_data)) ?>
      }
    ],
    yAxis : [
      {
        type : 'value',
        name : '金额 (BTC)',
      },
      {
        type : 'value',
        name : '次数',
      }
    ],
    series : [
  
      {
        name:'触发金额',
        type:'bar',
        data : <?=json(array_values(array_get($time_line_data, '*.abnormal_sum'))) ?>
      },
      {
        name:'触发次数',
        type:'line',
        yAxisIndex: 1,
        data : <?=json(array_values(array_get($time_line_data, '*.abnormal_count'))) ?>
      }
    ]
  };
  
  timeline.setOption(timeline_option);



  var count = echarts.init(document.getElementById('count'));
  var count_option = {
    title: [{
      text: '触发金额分布 (BTC，前12)',
      x: '50%',
      textAlign: 'center'
    }, {
      text: '触发次数分布 (前12)',
      x: '50%',
      y: '50%',
      textAlign: 'center'
    }],
    grid: [{
      top: '5%',
      width: '45%',
      bottom: '50%',
      left: '10%',
      containLabel: true
    }, {
      top: '55%',
      width: '45%',
      bottom: 0,
      left: '10%',
      containLabel: true
    }],
    xAxis: [{
      type: 'value',
      splitLine: {
        show: false
      }
    }, {
      type: 'value',
      gridIndex: 1,
      splitLine: {
        show: false
      }
    }],
    yAxis: [{
      type: 'category',
      data: <?=json(array_keys($abnormal_sum_distributed_infos)) ?>,
      splitLine: {
        show: false
      }
    }, {
      gridIndex: 1,
      type: 'category',
      data: <?=json(array_keys($abnormal_count_distributed_infos)) ?>,
      splitLine: {
        show: false
      }
    }],
    series: [{
      type: 'bar',
      stack: 'chart',
      z: 3,
      label: {
        normal: {
          position: 'right',
          show: true
        }
      },
      data: <?=json(array_values($abnormal_sum_distributed_infos)) ?>
    }, {
      type: 'bar',
      stack: 'chart',
      silent: true,
      itemStyle: {
        normal: {
          color: '#eee'
        }
      }
    }, {
      type: 'bar',
      stack: 'component',
      xAxisIndex: 1,
      yAxisIndex: 1,
      z: 3,
      label: {
        normal: {
          position: 'right',
          show: true
        }
      },
      data: <?=json(array_values($abnormal_count_distributed_infos)) ?>
    }, {
      type: 'bar',
      stack: 'component',
      silent: true,
      xAxisIndex: 1,
      yAxisIndex: 1,
      itemStyle: {
        normal: {
          color: '#eee'
        }
      }
    }, {
      type: 'pie',
      radius: [0, '25%'],
      center: ['75%', '25%'],
      data: <?=json(array_build($abnormal_sum_distributed_infos, function ($key, $value) {
          return [null, [
              'name' => $key,
              'value' => $value,
          ]];
      })) ?>
    }, {
      type: 'pie',
      radius: [0, '25%'],
      center: ['75%', '75%'],
      data: <?=json(array_build($abnormal_count_distributed_infos, function ($key, $value) {
          return [null, [
              'name' => $key,
              'value' => $value,
          ]];
      })) ?>
    }]
  };
  count.setOption(count_option);





  var week_hour = echarts.init(document.getElementById('week_hour'));

  var data = <?=json($abnormal_time_distributed_infos) ?>;

  var week_hour_option = {
      tooltip: {
          position: 'top'
      },
      title: [],
      singleAxis: [],
      series: []
  };

  echarts.util.each(['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], function (day, idx) {
      week_hour_option.title.push({
          textBaseline: 'middle',
          left: '10%',
          top: (idx + 0.5) * 100 / 7 + '%',
          text: day
      });
      week_hour_option.singleAxis.push({
          left: '18%',
          right: '15%',
          type: 'category',
          boundaryGap: false,
          data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
          top: (idx * 100 / 7 + 5) + '%',
          height: (100 / 7 - 10) + '%',
          axisLabel: {
              interval: 2
          }
      });
      week_hour_option.series.push({
          singleAxisIndex: idx,
          coordinateSystem: 'singleAxis',
          type: 'scatter',
          data: [],
          symbolSize: function (dataItem) {
              return (dataItem[1] * dataItem[1] / <?= $abnormal_time_distributed_max_count * $abnormal_time_distributed_max_count ?> * 50);
          }
      });
  });
  
  echarts.util.each(data, function (dataItem) {
      week_hour_option.series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
  });
  
  week_hour.setOption(week_hour_option);

</script>
</html>
